<template>



    <el-row style="height: 100%; display: flex; justify-content: center; align-items: center; background-color: lightcyan;">


        <el-card style="width: 350px; " shadow="always">

            <template #header>

                <el-row justify="center" align="middle" >

                    <h2>用户登录</h2>

                </el-row>

            </template>

            <el-form>

                <el-form-item>

                    <el-input prefix-icon="user" size="large" v-model="loginData.name" placeholder="username"></el-input>

                </el-form-item>
                <el-form-item>

                    <el-input prefix-icon="lock" type="password" size="large" v-model="loginData.password"  placeholder="password"></el-input>

                </el-form-item>


                <el-form-item>
                    <el-button type="primary" size="large" class="login-btn">
                        登 录
                    </el-button>
                </el-form-item>

            </el-form>




        </el-card>


    </el-row>




</template>

<script setup lang="ts">
import {ref} from 'vue'

const loginData = ref({
    name:"",
    password:""
}
)


</script>

<style scoped>


.login-btn {
    width: 100%;
    letter-spacing: 2px;
    background-color: #a0cfff;
    border-color: #a0cfff;

    &:hover {
        background-color: #79bbff;
        border-color: #79bbff;
    }
}

h1,h2{
    color: darkgreen;
}

</style>